<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>jQuery老虎机插件SlotMachine演示1_dowebok</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        background-color: #DCD293;
    }
    
    .line {
        padding: 100px 0px;
    }
    
    .slotMachineButton {
        width: 100px;
        height: 100px;
        overflow: hidden;
        display: inline-block;
        text-align: center;
    }
    
    .slotMachineButton {
        -moz-box-shadow: inset 0px 1px 0px 0px #fce2c1;
        -webkit-box-shadow: inset 0px 1px 0px 0px #fce2c1;
        box-shadow: inset 0px 1px 0px 0px #fce2c1;
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25));
        background: -moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
        background-color: #ffc477;
        border-radius: 75px;
        border: 6px solid #eeb44f;
        display: block;
        color: #ffffff;
        font: 700 40px/100px "Microsoft Yahei";
        height: 100px;
        width: 100px;
        text-decoration: none;
        text-align: center;
        text-shadow: 1px 1px 0px #cc9f52;
        margin: 0 auto;
        cursor: pointer;
    }
    
    .slotMachineButton:hover {
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477));
        background: -moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
        background-color: #fb9e25;
    }
    
    .slotMachineButton:active {
        position: relative;
        top: 1px;
    }
    
    .slotMachine {
        width: 100px;
        height: 100px;
        overflow: hidden;
        display: inline-block;
        text-align: center;
        border: 5px solid #000;
        background-color: #ffffff;
    }
    
    .noBorder {
        border: none !important;
        background: transparent !important;
        font: 14px arial;
    }
    
    .slotMachine .slot {
        width: 100px;
        height: 100px;
    }
    
    .slot1 {
        background-image: url("__LHJ__/img/slot1.png");
    }
    
    .slot2 {
        background-image: url("__LHJ__/img/slot2.png");
    }
    
    .slot3 {
        background-image: url("__LHJ__/img/slot3.png");
    }
    
    .slot4 {
        background-image: url("__LHJ__/img/slot4.png");
    }
    
    .slot5 {
        background-image: url("__LHJ__/img/slot5.png");
    }
    
    .slot6 {
        background-image: url("__LHJ__/img/slot6.png");
    }
    </style>
    <script src="__LHJ__/js/jquery-1.8.3.min.js"></script>
    <script src="__LHJ__/js/jquery.slotmachine.js"></script>
</head>

<body>
    <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">老虎机SlotMachine</h1>
    <div class="line">
        <div class="content" style="text-align: center">
            <div class="clear">
                <div id="machine1" class="slotMachine">
                    <div class="slot slot1"></div>
                    <div class="slot slot2"></div>
                    <div class="slot slot3"></div>
                    <div class="slot slot4"></div>
                    <div class="slot slot5"></div>
                    <div class="slot slot6"></div>
                </div>
                <div id="machine2" class="slotMachine">
                    <div class="slot slot1"></div>
                    <div class="slot slot2"></div>
                    <div class="slot slot3"></div>
                    <div class="slot slot4"></div>
                    <div class="slot slot5"></div>
                    <div class="slot slot6"></div>
                </div>
                <div id="machine3" class="slotMachine">
                    <div class="slot slot1"></div>
                    <div class="slot slot2"></div>
                    <div class="slot slot3"></div>
                    <div class="slot slot4"></div>
                    <div class="slot slot5"></div>
                    <div class="slot slot6"></div>
                </div>
                <div id="slotMachineButton1" class="slotMachineButton">GO!</div>
            </div>
            <div class="clear">
                <div id="machine1Result" class="slotMachine noBorder" style="text-align:left">Index: 0</div>
                <div id="machine2Result" class="slotMachine noBorder" style="text-align:left">Index: 1</div>
                <div id="machine3Result" class="slotMachine noBorder" style="text-align:left">Index: 2</div>
                <!-- <div class="slotMachine noBorder"></div> -->
            </div>
            <div class="clear">
            	欢迎您：{$user['nickname']}<br/>
				剩余抽奖次数：<span id="txtBonus">{$user['bonus']}</span>
				<input type="hidden" id="txtopenid" value="{$user['openid']}"/>
            </div>
        </div>
    </div>
    <script>
    $(document).ready(function() {
        var index1,index2,index3;
        var machine1 = $("#machine1").slotMachine({
            active: 0,
            delay: 500
        });

        var machine2 = $("#machine2").slotMachine({
            active: 1,
            delay: 500
        });

        var machine3 = $("#machine3").slotMachine({
            active: 2,
            delay: 500
        });

        function onComplete($el, active) {
            switch ($el[0].id) {
                case 'machine1':
                    index1=active.index;
                    $("#machine1Result").text("Index: " + active.index);
                    break;
                case 'machine2':
                    index2=active.index;

                    $("#machine2Result").text("Index: " + active.index);
                    break;
                case 'machine3':
                    index3=active.index;

                    $("#machine3Result").text("Index: " + active.index);
                    break;
            }
        }

        $("#slotMachineButton1").click(function() {
            var num=$('#txtBonus').text();
            if(num==0){
                alert('不好意思你的抽奖次数已用完');
                return;
            }else{
                $('#txtBonus').text(num-1);
            }
            
            var openid=$('#txtopenid').val();
            //判断是否还有抽奖次数
            $.post('{:url("cha")}',{openid:openid},function(data){
                if(data>0){
                    //修改我们的数据库
                    $.post('{:url("chou")}',{openid:openid},function(data){

                    });
                    machine1.shuffle(3, onComplete);
                    setTimeout(function() {
                        machine2.shuffle(3, onComplete);
                    }, 500);
                    setTimeout(function() {
                        machine3.shuffle(3, onComplete);
                    }, 1000);

                    setTimeout(function(){
                        console.log(index1);
                        console.log(index2);
                        console.log(index3);
                        if(index1===index2 && index2===index3){
                            alert('恭喜您中奖了');
                        }else{
                            alert('很遗憾，差一点');
                        }
                    },4000);
                }else{
                    alert('不好意思你的抽奖次数已用完');
                }
            });

        	
        })
    });
    </script>
</body>

</html>
